<template>
	<uni-drawer class="my-drawer" :width="width" ref="showRight" mode="right" :mask-click="mask" :is-mask-click="mask"
		@maskClick="handleMask" @change="onChange">
		<view class="content flex-column">
			<view class="header">
				<text>{{title}}</text>
				<slot name="header"></slot>
			</view>
			<scroll-view class="scroll-view-box" scroll-y="true">
				<slot></slot>
			</scroll-view>
		</view>
	</uni-drawer>
</template>

<script>
	import props from './props.js';
	import { mapState } from 'vuex'
	import { fingerprint } from '@/utils/tools.js'
	import { getFingerToken, setFingerToken, removeFingerToken } from '@/utils/auth.js'
	import { decrypt } from "@/utils/aes.js";
	import md5 from 'js-md5'
	export default {
		name: "m-dialog",
		mixins: [props],
		watch: {
			value(val) {
				if (val) {
					this.open();
				} else {
					this.close();
				}
			},
		},
		data() {
			return {

			};
		},


		methods: {
			open() {
				this.$refs.showRight.open();
			},
			close() {
				this.$refs.showRight.close();
			},
			async handleConfirm() {
				this.$emit("handleConfirm");
			},
			handleCancel() {
				this.$emit("handleCancel");
			},
			handleMask() {
				this.$emit("input", false);
			},
			onChange(e) {
				console.log(e)
				this.$emit("input", e);
			},
		},
	};
</script>

<style lang="scss">
	.my-drawer {
		
		/deep/ .uni-drawer__content {
			padding: var(--status-bar-height) 0 0;
		}

		.content {
			width: 100%;
			height: 100%;

			.header {
				text-align: center;
				padding: 30rpx;

				text {
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: bold;
				}
			}

			.main {
				flex: 1;
			}
		}
	}

	// 处理抽屉内容滚动
	.scroll-view-box {
		flex: 1;
			overflow-y: scroll;
	}

	// 
</style>
